<template>
    <div>
        <n-space vertical :size="12">
            <n-space>
                <n-input-group>
                    <n-input-group-label>状态：</n-input-group-label>
                    <n-select
                        :style="{ width: '100%', marginRight: '10px' }"
                        v-model:value="status"
                        :options="options"
                    />
                    <n-input-group-label>姓名：</n-input-group-label>
                    <n-input
                        v-model:value="state.queryForm.keyword"
                        type="text"
                        @keyup.enter="getDataList"
                    />
                </n-input-group>
                <n-button @click="getDataList" type="default">查询</n-button>
                <!--      <n-button @click="clearSorter" type="info">重置</n-button>-->
                <n-button @click="addOrUpdateHandle" type="info">新增</n-button>
                <!-- <n-button @click="deleteBatchHandle()" type="error">删除</n-button> -->
            </n-space>
            <div class="examine_type">
                <n-space>
                    <n-button type="primary" @click="examine"> 提交</n-button>
                    <n-button type="info" @click="examine" disabled> 初审</n-button>
                    <n-button type="success" @click="examine" disabled> 复审</n-button>
                </n-space>
            </div>
            <n-data-table
                :columns="columns"
                :data="state.dataList"
                :loading="state.loading"
                :pagination="state"
                :row-key="rowKey"
                @update:checked-row-keys="handleCheck"
                @update:page="currentChangeHandle"
                @update:page-size="sizeChangeHandle"
            />
        </n-space>

        <!-- 抽屉, 新增 / 修改 -->
        <n-drawer v-model:show="addOrUpdateRef" :width="502" :placement="placement">
            <n-drawer-content :title="!dataForm.id ? '新增' : '修改'" closable>
                <n-form
                    ref="dataFormRef"
                    :model="dataForm"
                    :rules="rules"
                    label-placement="left"
                    label-width="auto"
                    require-mark-placement="right-hanging"
                >
                    <n-form-item label="姓名" path="name">
                        <n-input v-model:value="dataForm.name" placeholder="姓名"/>
                    </n-form-item>
                    <!-- <n-form-item label="所属机构" path="orgIdList">

                  </n-form-item>
                  <n-form-item label="所属角色" path="rolesIdList">

                  </n-form-item>
                  <n-form-item label="所属岗位" path="postIdList">

                  </n-form-item> -->
                    <n-form-item label="手机号" path="phone">
                        <n-input v-model:value="dataForm.phone" placeholder="手机号"/>
                    </n-form-item>
                    <n-form-item label="邮箱" path="email">
                        <n-input v-model:value="dataForm.email" placeholder="邮箱"/>
                    </n-form-item>
                    <div style="display: flex; justify-content: flex-end">
                        <n-button round type="info" @click="submitHandle"> 保存</n-button>
                    </div>
                </n-form>
            </n-drawer-content>
        </n-drawer>
    </div>
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import {h, reactive, ref} from "vue";
import {useCrud} from "@/hooks";
import {IHooksOptions} from "@/hooks/interface";
import type {DataTableRowKey} from "naive-ui";
import {DrawerPlacement, FormInst, NButton, useMessage} from "naive-ui";
import {requestGet, requestPost} from "@/api";

const route = useRoute();
let id = route.query.id;
const message = useMessage();
const state: IHooksOptions = reactive({
    dataListUrl: `/tib/creditor/list`,
    deleteUrl: "/tib/creditor",
    queryForm: {
        projectId: id,
    },
});
const status = ref(null);
const options = reactive([
    {
        label: "未提交",
        value: "未提交",
    },
    {
        label: "已提交",
        value: "已提交",
    },
    {
        label: "未初审",
        value: "未初审",
    },
    {
        label: "已初审",
        value: "已初审",
    },
    {
        label: "未复审",
        value: "未复审",
    },
    {
        label: "已复审",
        value: "已复审",
    },
]);
//列表
const columns = ref([
    {
        type: "selection",
        disabled(row) {
            return row.name === "admin";
        },
    },
    {
        title: "姓名",
        key: "name",
    },
    {
        title: "手机号",
        key: "phone",
    },
    {
        title: "邮箱",
        key: "email",
    },
    {
        title: "状态",
        key: "status",
    },
    {
        title: "创建时间",
        key: "createdTime",
    },
    // {
    //   title: '启用',
    //   key: 'disabled'
    // },
    {
        title: "操作",
        key: "actions",
        //添加按钮时必须有模板组件，将按钮信息以参数形式传到组件中，在组件中写相关样式 或 使用naive ui提供的组件
        render(record) {
            console.log(record.id);
            return [
                h(
                    NButton,
                    {
                        //NButton是naive ui提供的按钮组件模板，需要引入 import { NTag, NButton, } from 'naive-ui'
                        // text: true,
                        secondary: true,
                        type: "info",
                        style: {marginRight: "10px"},
                        onClick: () => addOrUpdateHandle(record),
                    },
                    {default: () => "编辑"}
                ),
                h(
                    NButton,
                    {
                        // text: true,
                        secondary: true,
                        type: "error",
                        style: {marginRight: "10px"},
                        onClick: () => deleteHandle(record.id),
                    },
                    {default: () => "删除"}
                ),
                // h(
                //   NButton,
                //   {
                //     // text: true,
                //     secondary: true,
                //     type: "Primary",
                //     onClick: () => examine(record),
                //   },
                //   { default: () => "提交" }
                // ),
            ];
        },
    },
]);

//抽屉 新增、修改 【start
const dataFormRef = ref<FormInst | null>(null);
const dataForm = reactive({
    id: "",
    name: "",
    orgName: "",
    password: "",
    gender: 0,
    email: "",
    phone: "",
    roles: [] as any[],
    postIdList: [] as any[],
    orgIdList: [] as any[],
    status: 1,
    orgId: id,
    code: "",
    confirmType: "",
    level: "",
    postCode: "",
    addr: "",
});
const addOrUpdateRef = ref(false);
const placement = ref<DrawerPlacement>("right");
const addOrUpdateHandle = (row?: any) => {
    addOrUpdateRef.value = true;
    placement.value = "right";

    // 重置表单数据
    resetFields(dataForm);
    // id 存在则为修改
    if (row.id) {
        // alert(row.id)
        Object.assign(dataForm, row);
    }
};
// 点击审核
const examine = (row?: any) => {
    console.log(row);
    // alert(row.name)
    message.success("审核成功");
    // 重置表单数据
    // resetFields(dataForm)
    // // id 存在则为修改
    // if (row.id) {
    //   // alert(row.id)
    //   Object.assign(dataForm, row)
    // }
};
const rules = ref({
    name: {
        required: true,
        trigger: ["blur", "input"],
        message: "必填项不能为空",
    },
    // selectValue: {required: true, trigger: ['blur', 'change'], message: '请选择 selectValue' },
    // inputNumberValue: { type: 'number', required: true, trigger: ['blur', 'change'], message: '请输入 inputNumberValue' },
    // radioGroupValue: {required: true,trigger: 'change',message: '请选择 radioGroupValue' }
    // multipleSelectValue: { type: 'array', required: true, trigger: ['blur', 'change'], message: '请选择 multipleSelectValue'},
    // datetimeValue: { type: 'number', required: true, trigger: ['blur', 'change'], message: '请输入 datetimeValue' },
});
//拿到项目的名字编号
const project = reactive({item: ""});
requestGet(`/tib/project/${id}`)
    .then((res: any) => {
        project.item = res.data;
    })
    .catch((err) => {
        console.log(err);
        message.error(err.msg);
    });

// 表单提交
const submitHandle = () => {
    dataFormRef.value?.validate((errors) => {
        if (errors) {
            return false;
        }
        let price = {
            id: dataFormRef.value.model.id,
            name: dataForm.name,
            projectId: id,
            projectCode: project.item.code,
            projectName: project.item.name,
            phone: dataForm.phone,
            email: dataForm.email,
            type: "债权人",
            nature: "非自然人",
        };

        requestPost("/tib/creditor", price)
            .then((res: any) => {
                message.success(res.msg);
                addOrUpdateRef.value = false;
                getDataList();
            })
            .catch((err) => {
                console.log(err);
                message.error(err.msg);
            });
    });
};

//end】

//多选
const checkedRowKeysRef = ref<DataTableRowKey[]>([]);
const rowKey = (row) => row.id;

function handleCheck(rowKeys: DataTableRowKey[]) {
    checkedRowKeysRef.value = rowKeys;
    state.dataListSelections = checkedRowKeysRef.value;
    console.log(checkedRowKeysRef.value);
}

const {
    getDataList,
    sizeChangeHandle,
    currentChangeHandle,
    deleteBatchHandle,
    deleteHandle,
    resetFields,
} = useCrud(state);
getDataList();
</script>

<style>
.examine_type {
    /* margin-bottom: 10px; */
}
</style>
